{include file="public/header"/}
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<style>
	html,body{background-color: #fff;}
	
	.manage-wrap{margin: 20px auto 10px;width: 600px;}
	.editPopupBox{
		width: 100%;
		height: auto;
		padding: 20px 30px;
		box-sizing: border-box;
	}
	.manage-wrap .ui-input{width: 185px;font-size:12px;}
	.row-item{float:left ; width:50%;}
	#balance{text-align:right;}
	.mod-form-rows .label-wrap {font-size: 12px;}
	#name{ width: 130px;}
	#account_name{ position: relative;}
	#account_name .chk{ position: absolute; left: 151px; top:6px;}
	.valid-error{border-color: #dd4e4e}
	.layui-form-checkbox[lay-skin=primary]:hover i{border-color: #5dc5e7;}
	.layui-form-checked[lay-skin=primary] i{border-color: #5dc5e7;background-color: #5dc5e7;}
	.layui-form-checkbox[lay-skin=primary]{padding-left: 20px;}
	.layui-form-checkbox[lay-skin=primary] span{font-size: 12px;}
	.ui-droplist-wrap .droplist .list-item:hover{background-color: #faffad;}

</style>
	

<div id="manage-wrap " class="manage-wrap editPopupBox">
	<form id="manage-form" action="#">
		<ul class="mod-form-rows cf layui-form">
			<li class="row-item">
				<div class="label-wrap"><span class="red spe_red">*</span><label for="sn">账户编号</label></div>
				<div class="ctn-wrap">
					<span class="ui-combo-wrap ui-combo-active" style="width: 196px;"><input type="text" class="input-txt" autocomplete="off" style="width: 165px;" id="sn" name="sn" value=""><i class="trigger"></i></span>
				</div>
			</li>
			<li class="row-item">
				<div class="label-wrap"><span class="red spe_red">*</span><label for="name">账户名称</label></div>
				<div class="ctn-wrap" id="account_name">
				 	<input type="text" value="" class="ui-input" id="name" name="name" style="margin-right: 5px;">
					<input type="checkbox" value="1" name="is_default" lay-skin="primary" id="status" title="设为默认">
				</div>
			</li>
			<li class="row-item">
				<div class="label-wrap"><label for="name">余额日期</label></div>
				<div class="ctn-wrap"><input type="date" value="" class="ui-input" id="end_date" name="end_date"></div>
			</li>
			<li class="row-item" id="balanceWrap">
				<div class="label-wrap"><label for="name">期初余额</label></div>
				<div class="ctn-wrap"><input type="text" value="" class="ui-input" id="start_money" name="start_money"></div>
			</li>
			<li class="row-item row-category" style="position: relative;">
				<div class="label-wrap"><label for="category">账户类别</label></div>
				<div class="ctn-wrap" >
					<span id="category">
						<span class="ui-combo-wrap ui-combo-active" style="width: 195px;">
							<input type="text" class="input-txt valid" autocomplete="off" style="width: 169px;" id="type_name"  value="现金">
							<input type="hidden" class="input-txt valid" autocomplete="off" style="width: 169px;" name="type"  id="type" value="0">
							<span class="trigger" id="category_type_trigger"></span>
						</span>
					</span>
					
					<div class="ui-droplist-wrap" id="category_type_box" style="position: absolute; top: 30px; z-index: 1000; width: 195px; display: none; left: 80px;">
						<div class="droplist" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
							<div class="list-item selected" data-value="0" title="现金">现金</div>
							<div class="list-item" data-value="1" title="银行存款">银行存款</div>
						</div>
					</div>
				</div>
    		</li>
		</ul>
	</form>
</div>


<script>
	
	$(document).ready(function () {
		// 获取当前日期
		var myDate = new Date;
		var year = myDate.getFullYear(); //获取当前年
		var mon = myDate.getMonth() + 1; //获取当前月
		var date = myDate.getDate(); //获取当前日
		// console.log(year + '-' + mon + '-' + date)
		if (mon < 10) {
			mon = "0" + mon;
		}
		if (date < 10) {
			date = "0" + date;
		}
		$("#end_date").val(year + '-' + mon + '-' + date);

		// 点击选择账户类别
		$("#category_type_trigger").click(function(){
			$("#category_type_box").toggle();
		});
		// 赋值
		$("#category_type_box .list-item").click(function(){
			$("#type_name").val($(this).attr("title"));
			$("#type").val($(this).attr("data-value"));
			$(this).addClass("selected").siblings().removeClass("selected");
			$("#category_type_box").hide();
		});
	});

	//选择类别-选择框外点击则隐藏
    $(document).mouseup(function (e) {
      if(e.target.id!="type_name"){
            var con = $("#category_type_box");   // 设置目标区域
            if (!con.is(e.target) && con.has(e.target).length === 0) {
              $("#category_type_box").hide();
            }
        } 
    });

	$("#btn-add").click(function(){
		$.ajax({
		    type: 'POST',
		    url: "save.html",
		    data: $("#manage-form").serialize(),
		    dataType: "json",
		    async: false,
		    error: function (request) {
		        alert("发送请求失败！");
		    },
		    success: function (data) {
		        if (data.status == 1) {
		        	alert(data.msg);
		        } else {
		            alert(data.msg);
		        }

		    }
		});
	});


</script>
{include file="public/footer"/}
		
